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ABSTRACT 


Mobility  has  already  become  mainstream  interface  for  applications  and  end  users,  even  the  most  complex  and 
heavy  applications  are  converging  to  be  fully  compatible  to  these  devices,  but  supporting  mobility  comes  with  technical 
and  hardware  constraints  such  as  memory  space,  processing  speed  and  small  display  screen  sizes.  These  constraints  force 
applications  to  compromise  on  user  experience.  As  part  of  software  development  till  now  we  have  been  able  to  adapt  in 
order  to  improve  processing  and  memory  utilization,  but  the  small  screen  sizes  on  mobile  devices  has  always  been  a 
challenge. 

This  paper  proposes  a new  User  Experience  [1]  design  approach  (3DHTML-Web)  to  bring  2D  and  3D  content 
under  a common  single  3D  virtual  context  environment.  This  virtual  3D  environment  resolves  the  screen  viewability 
problem  by  providing  a wide  viewable  area  and  allows  traditional  applications  that  majorly  deal  with  2D  content  to  provide 
new  engaging  user  experience. 

KEYWORDS:  New  User  Experience  [1]  Design  Approach  (3DHTML-Web) 

INTRODUCTION 

3D  [2]  graphics  and  VR  ( virtual  reality  [3])  has  always  been  a fascinating  topic  in  computer  science,  but  in  last 
decade  it  has  grown  exponentially  more  powerful,  realistic  and  at  the  same  time  easy  to  use  too.  Growing  research  in  these 
fields  both  academics  and  IT  companies  have  provided  a very  strong  base  and  opportunities  for  their  usage  in  various 
unexplored  fields  and  mobility  being  one  of  them. 

In  current  trend  all  web  or  desktop  applications  need  to  have  mobility  support  due  to  the  advantages  that  mobile 
devices  themselves  provides,  small,  light  and  mobile.  In  order  to  support  mobility,  applications  need  to  overcome  technical 
and  hardware  constraint  such  as  limited  memory,  slow  processing  power  and  small  display  screens.  Limited  memory  and 
slow  processing  powers  can  be  resolved  by  adopting  efficient  coding  practices,  but  small  screens  cause’s  applications  to 
compromise  on  user  experience  by  limiting  data  details  or  user  interaction  capabilities. 

This  paper  proposes  a new  user  experience  design  approach  (3DHTML-Web)  to  bring  2D  and  3D  content  under  a 
single  3D  virtual  context  environment  to  provide  a wide  virtual  view  to  the  end  user,  thus  allowing  applications  to  provide 
large  detailed  data  through  the  same  small  screens.  Complete  3D  virtual  environment  would  also  allow  applications  to  be 
future  compatible  with  touchless  VR  technologies  which  majorly  reply  on  content  to  be  in  3D  context  and  provide  a very 
engaging,  different  and  seamless  user  experience. 
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PROBLEM 

There  are  two  problem  statements  addressed: 

• Limited  Viewable  Area  Due  to  Small  Screen  Sizes  in  Mobility  Devices 

Web  applications  adaptation  of  mobility  has  caused  them  to  change  UI  ( User  Interface)  design  approach 
and  become  dynamically  adaptive  to  various  screen  sizes,  but  with  complex  applications  came  problem 
of  accommodating  and  representing  the  large  set  of  information  on  these  small  screens. 

• Fragmented  User  Experience  with  Combination  of  2D  And  3D  Objects  Content 

Representing  3D  objects  in  2D  contextual  environment  has  always  resulted  in  reduced  usability  and 
fragmented  user  experience,  where  user  continuously  switch  between  2D  and  3D  user  interfaces. 
To  provide  a seamless  and  user  friendly  UX  ( User  Experience),  this  fragmentation  needs  to  be  eliminated 
while  maintain  the  advantage  that  3D  objects/model  brings  to  the  end-user. 

PROPOSAL:  3DHTML-WEB 

3DHTML-Web  is  a user  experience  design  approach  to  represent  HTML  elements  as  3D/2D  objects  in  a 
pre-defined  controlled  3D  virtual  environment,  which  can  be  made  accessible  over  web  through  web  browsers. 
It  transforms  the  user  experience  to  three  dimensional  using  modern  browser  based  lightweight  3D  rendering  technologies 
such  as  webGL  [4]  or  CSS3  [5],  this  allows  the  application  to  provide  a new  enhanced  user  experience  through  the  existing 
web  browsers. 

3DHTML-WEB  DESIGN  ALGORITHM 

1.  Identifying  the  Story:  Identify  the  scenario  where  the  end  user  would  be  benefited  if  interacting  within  a 

3Dimentional  environment.  Generally  where  end  user  interacts  with  combined  2D  and  3D  data  are  the  prominent 
candidate,  whereas  even  traditional  applications  whose  majorities  of  user  interaction  are  based  on  tables,  list  and 
graphs  can  also  be  benefited  by  this  design. 

2.  Objects  Classification:  Classification  of  various  application  intractable  objects  as  2D  or  3D.  This  classification 

helps  in  scene  and  environment  preparation. 

3.  Environment  Layout:  Environments  define  the  boundaries  of  the  user  interaction  and  the  look  & feel  application 

want  the  end  user  to  visualize  them  in. 

4.  Define  the  Scene:  Scene  can  be  considered  as  a step  by  step  inaction  of  a story  (Business  goal/Scenario). 

Scene  preparation  consists  of  following  2 steps: 

4.1  Scene  Steps  Extraction:  Scene  steps  are  the  end  user  way  finding  to  reach  the  end  goal  (success  or  failure). 

4.2  Scene  Sequencing:  This  defines  the  actual  sequencing  of  steps  that  user  need  to  complete  to  finish  the  story.  This 
can  be  blocking  sequence  where  the  user  cannot  move  forward/backward  before  performing  some  operation  or 
Non-blocking  that  allows  the  user  to  move  back  and  forward  any  time  as  needed. 

5.  Define  User  Interaction:  How  the  User  would  interact  with  the  environment  and  the  objects  inside  it.  Basic  user 

interaction  rules  to  have  a consistent  experience  for  the  end  user. 
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3DHTML-Web  design  can  be  easily  implemented  usingany  light  weight  browser  rendering  technologies;  among 
those  currently  widely  used  in  the  industry  is  THREE.js  [6],  it  internally  uses  WebGL.  THREE  provides  wide  variety  of 
utility  and  rendering  options, in  context  of  3DHTML-Web  design  the  WebGLRenderer  and  CSSJRendereroptions  available 
in  THREE  can  be  used  for  rendering  3D  and  2D  content  respectively. 

Case  Study  1:  Project  Management  System 

In  general  PMS  (Project  Management  System)  is  responsible  to  keep  track  of  single  or  multiple  projects  for  an 
organization.  This  application  comprises  only  of  2D  content  such  as  Table,  forms  and  Graphs. 

General  user  Interactions: 

• View  Project  details 

• View  Project  task  list 

• View  Task  properties 

Specific  Authoring  Interaction: 

• Edit  Project  Details 

• Edit  task  status 

Using  the  current  trend  for  UI  designs  all  above  listed  use  cases  are  represented  as  individual  screens  where  the 
end  user  need  to  interact  (click  or  swipe)  with  the  system  to  move  to  next  screens  one  at  a time  as  shown  in  Figure  1. 
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Figure  1:  PMS  (Project  Management  System)  Generic  UI  Design 

Proposal  is  to  bring  the  traditional  2D  content  into  a three  dimensional  virtual  contextual  environment.  This  would 
allow  applications  to  display  large  amount  of  relevant  in-depth  data  details  easily  to  the  user  and  also  provide  a new 
engaging  experience. 
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Application  of  3DHTML-Web  Design 


Table  1:  PMS  (Project  Management  System)  3DHTML-Web  Design 


Story 

User  wants  to  view  Project  Details  and  overview  graphs  ->Task  list  ->Task  Details  -> 
Change  task  status 

Object 

Classification 

All  views  are  2D. 

Environment 

Layout 

We  would  be  using  hierarchical  layout,  where  Task  Details  view  would  be  child  of  Project 
properties  view,  since  a task  will  always  be  under  the  context  of  any  project. 

Scene 

Scene  Steps  Extraction: 

a.  View  Project  Details 

b.  Display  Project  Task  List 

c.  User  select  a listed  task 

d.  Display  Task  Details  with  overview  graphs 

e.  Display  Task  actions  view 

f.  User  update  the  task  status 

Scene  Sequencing:  Same  order  as  listed  above. 

Here  c is  a blocking  step,  i.e.  user  cannot  proceed  without  completing  it. 

User 

Interaction 

1.  User  is  provided  with  180  degree  FOV  (Field  of  vision). 

2.  User  can  easily  rotate  view  on  y axis  to  look  at  the  extended  views 

Figure  2:  PMS  (Project  Management  System)  3DHTML-Web  UI  Design 


We  can  see  the  improvement  in  UX  by  using  3D  contextual  environment  as  user  can  have  large  viewability  even 
on  small  display  hardware  Figure  2,  here  user  can  perform  zoom-in  and  zoom-out  to  increase  or  decrease  his  viewable 
area.  This  setup  can  be  combined  with  VR  devices  for  complete  fluidic  experience. 


Case  Study  2:  Online  Movie  Ticket  Booking  Portal 

Currently  all  online  movie  ticket  booking  portals  provide  a theater  seats  layout  as  an  image  and  expect  the  user  to 
select  his  seats  as  shown  in  Figure  3. 
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Figure  3:  Movie  Ticket  Booking  Generic  UI  Design 


Here  the  customer  has  to  guess  the  screen  visibility  from  seats,  in  this  scenario  a 3D  view  of  the  theater  would 
help  customer  in  better  seats  selection  as  it  can  allow  user  to  get  the  human  eye  view  from  those  seats  and  also  other  details 
such  as  nearest  exit  and  floor  plan.  Whereas  if  not  only  the  seats  selection  but  the  complete  booking  process  can  be 
migrated  to  3D  that  would  provide  a seamless  and  enhanced  UX. 


3DHTML-Web  can  provide  this  complete  3D  virtual  environment  where  customer  can  get  a 3D  view  of  the 
theater,  additional  human  eye  view  from  seats  and  also  bring  the  HTML  2D  elements  into  this  same  3D  contextual 
environment. 


Application  of  3DHTML-Web  Design 


Table  2:  PMS  3DHTML-Web  Design 


Story 

Movie  tickets  booking  : View  Movie  List->Movie  Trailer  and  reviews -> Seats 
selection^ Human  eye  view  from  seats ->Checkout 

Object 

Classification 

2D  objects  : Movie  list  ,Movie  Trailer  player.  Movie  review  list 
3D  object  : Theater  layout.  Theater  seats 

Environment 

Layout 

Environment  needs  to  accommodate  both  2D  content  such  as  Movies  List  and  also  the  3D 
theater  model  which  includes  the  Movie  Trailer  player  and  human  eye  view  from  seats. 

Scene 

Scene  steps  extraction: 

a.  Display  movie  list 

b.  Display  theater 

c.  Seats  selection 

d.  Human  eye  view  from  the  selected  seats 

e.  View  the  movie  trailer  in  the  human  eye  view 

f.  Checkout  for  payment  gateway 

Scene  Sequencing:  Same  order  as  listed  above. 

Herea  and  c are  blocking  steps,  i.e.  user  cannot  proceed  without  completing  them. 

User 

Interaction 

1 . Initially  while  displaying  the  movies  list  the  user  interaction  is  constraint  to  rotation  on 
x-axis. 

2.  Once  the  seats  selection  process  is  initiated  the  user  can  free  flow  inside  the  theater 
model. 

3.  Quick  Human  Eye  view  available. 
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Figure  4:  Movie  Ticket  Booking  3DHTML-Web  UI  Design 


Movies  list  is  displayed  to  the  left  side  of  the  user  initial  orientation.  Once  movie  selection  is  completed,  a 3D 
representation  of  the  theater  is  displayed  in  the  middle,  where  user  can  select  seats  as  well  as  see  human  eye  view  from 
them.  Use  of  theater  3D  model  while  seats  selection  process  would  provide  user  satisfaction  and  confidence,  since  he 
would  be  able  to  see  the  simulated  view  from  his  selected  seats.  Since  the  complete  process  is  migrated  to  3D  context  the 
complete  user  experience  is  smooth  as  end  user  does  not  switch  between  2D  and  3D  context. 

CONCLUSIONS 

3DHTML-Web  design  approach  provides  the  basic  algorithm  to  combine  2D  and  3D  content  inside  a 3D  virtual 
contextual  environment  in  order  to  enhance  the  user  experience  and  resolve  screen  size  constraint.  It  also  allows  traditional 
applications  which  majorly  deal  with  2D  content  such  as  table,  forms  and  graphs  to  become  compatible  with  modern 
touchless  virtual  reality  technologies. 
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